<template>
  <div >
    <div class="power-head">
      <div class="p-head-l">
        <el-button type="success" class="ad" size="mini">Ad</el-button>
        <strong class="circlei">CircleCl</strong>
        <i class="el-icon-grape"></i>
        <span class="text">Automate your development process quickly, safely, and at scale. <a href="https://circleci.com/" class="sb">Start Building</a></span>
      </div>
      <a href="https://codefund.io/" class="eabc"><i>ethical ad by CodeFund</i></a>
    </div>
    <el-card>
      <p>您的权限：["{{$store.state.power === 0 ? 'Admin' : 'Ordinary user'}}"]</p>
      <p class="trigger-power">切换权限：
       <el-radio-group v-model="power" @change="changePower(404)" :border="true" size="mini">
        <el-radio-button label="Editor"></el-radio-button>
        <el-radio-button label="Admin"></el-radio-button>
       </el-radio-group></p>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      power: this.$store.state.power ? 'Editor' : 'Admin'
    }
  },
  computed: {
  },
  methods: {
    changePower(isJump) {
      const power = this.$store.state.power
      if(power === 0) {
        this.$store.commit('changePower', 1)
        if(isJump) {
          this.$router.push('/404')
        }
      }else {
        this.$store.commit('changePower', 0)
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .power-head {
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    background-color: #fefefe;
  }
  .p-head-l {
    display: flex;
    align-items: center;
  }
  .ad {
    padding: 2px 4px;
    margin-right: 10px;
  }
  .circlei {
    transform: scale(.8);
  }
  .text {
    color: #aaa;
    font-size: 14px;
  }
  .sb:visited {
    color: blue;
  }
  .el-icon-grape {
    color: purple;
  }
  .eabc {
    color: #a5a5a5;
    text-decoration: none;
    font-size: 12px;
  }
  .eabc:hover {
    text-decoration: underline;
  }
  .el-card {
    margin: 10px;
    height: 500px;
  }
  .trigger-power {
    margin: 10px 0;
  }
</style>
